<template>
    <v-card height="520">
        <v-card-title><h4>添加配置信息</h4></v-card-title>
        <v-card-text>
            <v-form v-model="valid">
                <v-container>
                    <v-row>
                        <v-col
                        cols="12"
                        md="4"
                        >
                            <v-select
                                v-model="config.act_type"
                                :items="TypeIems"
                                label="参数类型"
                            ></v-select>
                        </v-col>

                        <v-col
                        cols="12"
                        md="8"
                        >
                            <v-text-field
                                v-model="config.key_name"
                                :rules="nameRules"
                                :counter="10"
                                label="参数名称"
                                required
                            ></v-text-field>
                        </v-col>
                    </v-row>
                    <v-row>
                        <v-col>
                            <v-textarea
                                v-model="config.key_value"
                                :rules="valueRules"
                                label="参数值"
                                required
                            ></v-textarea>
                        </v-col>
                    </v-row>
                    <v-row>
                        <v-col
                            cols="12"
                        >
                            <v-text-field
                                v-model="config.description"
                                :counter="30"
                                label="参数描述"
                            ></v-text-field>
                        </v-col>
                    </v-row>
                </v-container>
            </v-form>
        </v-card-text>
        <v-card-action>
            <div style="margin-left:300px">
                <v-btn text color="primary" @click="closeDialogConfig">取消</v-btn>
                <v-btn color="primary" @click="addConfig" small>添加</v-btn>
            </div>
        </v-card-action>
    </v-card>
</template>

<script>
import { defineComponent } from '@vue/composition-api'

export default defineComponent({
    setup() {
        
    },
    props: {
        config: {
            type: Object,
            default: {
                app_range: 'task',
                act_type: '',
                key_name: '',
                key_value: '',
                description: '',
            },
        }
    },
    data(){
        return {
            valid: false,
            TypeIems: ['ding', 'login', 'jira', 'ts'],
            nameRules: [
                v => !!v || 'value is required',
                v => v.length <= 20 || 'value must less then 20 characters',
            ],
            valueRules: [
                v => !!v || 'phone is required',
            ],

        }
    },
    mounted(){
        
    },
    methods: {
        closeDialogConfig: function(){
            console.log('closeDialogConfig ...')
            this.$emit('closeDialogConfig')
        },
        addConfig: function(){
            let post_data = {'params': this.config}
            if(!this.valid){
                alert('参数名称为空')
            }else{
                this.$api.task.addTaskConfig(post_data).then(res=>{
                    alert(res.data.message)
                })
            } 
        },
    }
})
</script>

<style scoped>

</style>